<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="page2">
			<view class="group">
				<u-cell-group>
					<u-cell title="个人设置" isLink @click="showUser">
						<my-imgicon name="dingdanbianji" slot="icon"></my-imgicon>
					</u-cell>
					<u-cell title="系统信息" isLink @click="$c.a('user/about/info')">
						<my-imgicon name="baogao" slot="icon"></my-imgicon>
					</u-cell>
					<u-cell title="退出登录" isLink @click="userLoginOut">
						<my-imgicon name="zhuxiao" slot="icon"></my-imgicon>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<u-popup :show="userShow" @close="userShow=false" :closeable="true" :round="10">
			<view class="pop-title">修改用户信息</view>
			<view class="pop-box">
				
				<scroll-view :scroll-y="true">
					<u-cell  title="头像">
						<view slot="value">
							<!-- #ifdef MP-WEIXIN -->
							<button class="wx-avatar" open-type="chooseAvatar" @chooseavatar="wxChooseAvatar">
							  <image class="avater-img" mode="widthFix" :src="userData.avatar"></image>
							</button>
							<!-- #endif -->
							<!-- #ifdef H5 || MP-ALIPAY -->
							<view class="wx-avatar">
								<my-imgUpload
									maxCount="1"
									width="80rpx"
									height="80rpx"
									@upChange="upAvatar"
								>
									<image class="avater-img" mode="widthFix" :src="userData.avatar"></image>
								</my-imgUpload>
							</view>
							<!-- #endif -->
						</view>
					</u-cell>
					<u-cell  title="姓名">
						<view slot="value">
							<input v-model="userData.realname" class="form-input" placeholder="请输入姓名"/>
						</view>
					</u-cell>
					<u-cell  title="昵称">
						<view slot="value">
							<input type="nickname" v-model="userData.nickname" class="form-input" placeholder="请输入昵称" @blur="setNickName"/>
						</view>
					</u-cell>
					<u-cell  title="邮箱">
						<view slot="value">
							<input v-model="userData.email" class="form-input" placeholder="请输入邮箱"/>
						</view>
					</u-cell>
				</scroll-view>
				
			</view>
			<view class="pop-foot">
				<button class="my-but-primary" @click="upUser">保存</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import $file from '@/common/file.js'
	import $user from '@/common/user.js'
	export default {
		data() {
			return {
				nav_title:'设置',
				userShow:false,
				userData:{
					avatar:"",
					realname:"",
					email:"",
					nickname:"",
				},
				formLabelWidth:80,
				is_upload_avatar:false,		//是否修改过头像
			}
		},
		onLoad(){

		},
		onShow(){
			this.initData()
		},
		computed:{
			...mapState({
				userInfo:state => state.$userInfo,
			}),
		},
		methods: {
			...mapMutations(['loginout']),
			initData(){
				
			},
			//退出登录
			userLoginOut(){
				this.$u.api.loginOut().then(res=>{
					this.loginout()
					this.$c.success('已退出登录','index/user')
				}).catch(e=>{
					// 如果提示未登录，清除登录状态
					if(e.code===41001){
						this.loginout()
					}
				})
			},
			//弹出修改窗口
			showUser(){
				this.$u.api.userInfo().then(res=>{
					let data=res.data.member
					this.userData.avatar=data.avatar
					this.userData.realname=data.realname
					this.userData.nickname=data.nickname
					this.userData.email=data.email
				})
				this.userShow=true
			},
			// 修改用户信息判断
			upUser(){
				if(!this.userData.nickname){
					this.$c.info('请输入昵称')
				}else{
					// #ifdef MP-WEIXIN
					if(this.is_upload_avatar){			//是否重新上传头像
						$file.uploadImg(this.userData.avatar).then(img=>{
							this.userData.avatar=img.data.url;
							this.submit();
						});
					}else{
						this.submit();
					}
					// #endif
					
					// #ifdef H5 || MP-ALIPAY
					this.submit();
					// #endif
				}
			},
			// 提交修改用户信息
			submit(){
				this.$u.api.userUp(this.userData).then(res=>{
					//更新用户信息
					$user.getUser(true);
					this.$c.success('修改成功！')
					this.userShow=false
				})
			},
			
			// #ifdef MP-WEIXIN
			//获取微信头像
			wxChooseAvatar(e){
				this.userData.avatar = e.detail.avatarUrl;
				this.is_upload_avatar=true;
			},
			// #endif
			
			// #ifdef H5 || MP-ALIPAY
			// H5上传头像
			upAvatar(e){
				this.userData.avatar = e.img
			},
			// #endif
			
			//设置昵称数据
			setNickName(e){
				this.userData.nickname=e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $u-bg-color;
	}
	.group{
		background-color:#FFFFFF;
		margin-top: 10rpx;
	}
	.wx-avatar{
		padding: 0rpx;
		margin: 0rpx auto;
		border: 0;
	}
	.wx-avatar .avater-img{
		border: 1rpx solid #DDD;
		border-radius: 20rpx;
		margin: 0rpx auto;
		width: 100rpx;
		height: 100rpx;
	}
</style>
